<template>
    <el-row class="productList" :gutter="20">
        <el-col :span="2">
            <el-button plain size="small">添加</el-button>
        </el-col>
        <el-col :span="22">
            <el-row :gutter="15">
              <el-col :span="6" v-for="(o, index) in productArr" :key="o.id">
                  <el-card :body-style="{ padding: '0px' }">
                      <img :src="o.url" class="image">
                      <div style="padding: 5px;">
                          <span>{{o.name}}{{o.id}}</span>
                          <div class="bottom clearfix">
                              <b>{{o.unit}}</b>
                              <el-button v-if="close" type="text" @click="handleDelete(index)" class="button">删除</el-button>
                          </div>
                      </div>
                  </el-card>
              </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>
<script>
import "./index.scss";

export default {
  data() {
    return {
      productArr: []
    };
  },
  props: {
    value: {
      type: Array,
      default: []
    },
    close: {
        type: Boolean,
        default : true
    }
  },
  methods: {
    handleDelete: function(index) {
      this.productArr.splice(index, 1);
      this.updateValue();
    },
    updateValue: function() {
      let valueArr = [];
      if (this.productArr.length != 0) {
        for (let index = 0; index < this.productArr.length; index++) {
          const element = this.productArr[index];
          valueArr.push(element.id);
        }
      }
      this.$emit("input", valueArr);
    }
  },
  watch: {},
  mounted: function() {},
  created: function() {
    this.productArr = [
      {
        id: 1,
        name: "产品1",
        unit: "罐",
        url: "/dist/hamburger.png"
      },
      {
        id: 2,
        name: "产品2",
        unit: "罐",
        url: "/dist/hamburger.png"
      },
      {
        id: 3,
        name: "产品3",
        unit: "罐",
        url: "/dist/hamburger.png"
      },
      {
        id: 4,
        name: "产品4",
        unit: "罐",
        url: "/dist/hamburger.png"
      }
    ];
  },
  beforeDestroy: function() {}
};
</script>